<!--企业详情页-->
<template>
<!--  第一部分-->
  <div class="head" >
    <el-row style="height: 70%;">
      <el-col :span="4" style="text-align: left;margin-left: 21%">
        <h1>{{ jobListData.positionName }}<el-tag type="warning">悬赏500元/人</el-tag></h1>
        <div style="color: #ec852c;font-size: 20px">
          {{jobListData.salary}}
          <span style="font-size: 15px;color: #888888">{{ jobListData.experience }}/学历：{{ jobListData.education }} </span>
        </div>
        <br>
        <el-button>年终奖</el-button>
        <el-button>双休</el-button>
        <el-button>定期体检</el-button>
      </el-col>
      <el-col :span="4" style="text-align: left;margin-left: 26%">
        <h1>{{ jobListData.companyName }}</h1>
        <p>1000-9999·IT|通信|电子|{{ jobListData.industry }}·私营企业</p>
        <span>马克</span>
        <span>{{jobListData.phone}}</span>
      </el-col>
    </el-row>
    <el-divider style="width: 60%;margin: 0 auto"/>
    <el-row style="margin-top: 1%">
      <el-col :span="13">
        <el-tag type="primary">时间：{{ jobListData.createTime }}</el-tag><span style="font-size: 15px;color:#888888;">发布时间</span>
      </el-col>
      <el-col :span="10" >
        <div style="">
          <el-button type="primary" @click="">投一个呗</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
<!--  卡片部分-->
  <el-row style="background-color: #f7f9ff ;width: 100vw;margin:0 auto;">
    <el-col :span="15" >
      <el-card style="width: 66%;margin: 1% 1% 1% 32%;text-align: left">

            <p style="font-size: 25px">工作描述</p>
            <p>{{jobListData.requirements}}</p>
            <p style="font-size: 25px">岗位职责</p>

            <p>职责范围：
              {{
                jobListData.description
              }}</p>
            <p style="font-size: 25px">工资说明</p>
            <p>{{jobListData.payMode}}</p>
            <p>人民币：{{jobListData.min_salary}}-{{jobListData.max_salary}}</p>
            <p style="font-size: 25px">工作环境</p>
              <p>{{jobListData.environment}}</p>
            <p style="font-size: 25px">作息说明</p>
                <p>{{jobListData.rest}}</p>
            <p style="font-size: 25px">公司图片</p>
            <div class="carousel-wrapper">
              <el-carousel trigger="click" style="width: 100%;height: 100%">
                <el-carousel-item v-for="item in carouselItems" :key="item.id">
                  <img :src="item.imgUrl" class="carousel-image" />
                  <!-- 如果需要显示文字 -->
                  <h3 class="small justify-center" text="2xl">{{ item.id }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card style="text-align: center;width: 50%;margin-top: 2%">
        <div style="font-size: 25px;font-weight: bold">企业基本信息</div>
        <img src="../../assets/jdimg/tenxunlogo.png">
        <div style="font-size: 20px">{{jobListData.companyName}}</div>
        <p>{{ jobListData.industry }}</p>
        <el-button>3个在招职位</el-button>
      </el-card>
      <el-card style="text-align: left;width: 50%;margin-top: 2%">
        <div style="font-size: 25px;font-weight: lighter">基本信息</div>
        <hr>
        <div class="baseinfo">
          <div><el-icon><Grid /></el-icon><span>{{ jobListData.industry }}</span></div>
          <div>
            <el-icon><Histogram /></el-icon><span>B轮</span></div>
          <div>
            <el-icon><User /></el-icon><span>1000-9999人</span></div>
          <div>
            <el-icon><Compass /></el-icon><span>https://www.lianjia.com/</span></div>
          <div>
            <el-icon><Location /></el-icon><span>{{ jobListData.cityName }}</span></div>

        </div>

        <div style="font-size: 25px;font-weight: lighter;margin-top: 2%">管理团队</div>
        <hr>
        <div style="width: 100px;height: 100px;margin: 0 auto">
          <img src="../../assets/jdimg/mahauteng.png" style="width: 100%;">
        </div>
        <div style="font-size: 25px;font-weight: lighter;margin-top: 10%;text-align: center">{{ jobListData.boss }}</div>
        <p>{{jobListData.bossExperience}}</p>

        <div style="font-size: 25px;font-weight: lighter;margin-top: 2%">企业福利</div>
        <hr>
        <div class="welfare">
          <div v-for="i in 12">五险一金</div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script setup>
import { Grid,Histogram,User, Compass,Location} from '@element-plus/icons-vue'
import router from "@/router";
import {useStore} from "vuex";
import {computed, ref} from "vue";
const carouselItems = [
  { id: 1, imgUrl: require("@/assets/carousel/1.jpg") },
  { id: 2, imgUrl: require("@/assets/carousel/2.jpg") },
  { id: 3, imgUrl: require("@/assets/carousel/3.jpg") },
  { id: 4, imgUrl: require("@/assets/carousel/4.jpg") },
]
const store=useStore();
const jobListData=computed(()=>store.state.jobListData)

</script>

<style scoped>
.head{
  width: 100vw;
  height: 24vh;
  background-color: #434b62;
}
h1{
  color: white;
}
p{
  color: #abb2c8;
  font-size: 15px;
}
.company-logo{
  width: 22%;
  height: 67%;
  border: 2px white solid;
  border-radius: 10px;
}
.job-card{
  text-align: left;
  width: 60%;
  display: flex;
  margin: 0 auto;
  justify-content: space-evenly;
}
.job-card>div{
  height: 45px;
  background-color: white;
  border-radius: 5px;
  padding: 10px;
}
.carousel-wrapper {
  width: 60%;  /* 父容器宽度（百分比） */
  height: 50vh; /* 父容器高度（视窗高度的50%） */
}
.carousel-image{
  width: 100%; height: 100%; object-fit: cover
}
.baseinfo>div{
  margin-top: 10px;
  color: #665f96;
}
.welfare{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 10px;
}
.welfare>div{
  width: 75px;
  margin: 2%;
  padding: 3px;
  height: 25px;
  text-align: center;
  background-color: #3c77fe;
  color: white;
}
</style>